<template>
	<div>
		<el-dialog v-model="upLoadVisible" title="" width="30%">
			<div class="topTit">Report</div>
			<a-textarea v-model:value="value2" class="textarea" placeholder="Report content" :auto-size="{ minRows: 2, maxRows: 5 }" />
			<div class="upLoad">
				<el-upload
					v-model:file-list="fileList"
					:action="baseUrl + '/xpert-api/common/file/upload'"
					list-type="picture-card"
					:on-preview="handlePictureCardPreview"
					:on-progress="progress"
					:on-success="success"
					:headers="uploadHeaders"
					multiple
					:on-remove="handleRemove">
					<el-icon><Plus /></el-icon>
				</el-upload>
			</div>
			<div class="btnBox f f-a-c"><div @click="report" class="hand botBtn">Submit</div></div>
		</el-dialog>
	</div>
</template>

<script setup>
	import { ref } from "vue";
	import { Plus } from "@element-plus/icons-vue";
	import { baseUrl } from "@/utils/setting.js";
	let num = localStorage.getItem("home") || 1;
	let token = null;
	if (num == 1) {
		// 代表是xpert首页
		token = "Bearer " + localStorage.getItem("xpToken") || "";
	} else {
		// 代表是knowClub首页
		token = "Bearer " + localStorage.getItem("kcToken") || "";
	}
	const uploadHeaders = ref({
		"Authorization-Xp": token
	});
	let upLoadVisible = ref(false);
	let input1 = ref("");
	let value2 = ref("");
	let fileList = ref([]);
	let imgList = ref([]);
	const emit = defineEmits(["reportObj"]);
	// 点击文件列表中已上传的文件时的钩子
	const handlePictureCardPreview = (e, s) => {};
	// 移除时的钩子
	const handleRemove = (e, s) => {
		console.log("删除", e, s);
	};
	// 点击提交时
	const report = () => {
		emit("reportObj", { imgList: imgList.value, content: value2.value });
		// 清空
		imgList.value = [];
		fileList.value = [];
		value2.value = [];
	};
	// 上传时的钩子
	const progress = (e, s) => {
		console.log("上传", e, s);
	};
	// 上传成功时的钩子
	const success = (e, s) => {
		// console.log("上传成功", e, s);
		imgList.value.push(e.data);
		console.log("上传成功", imgList.value);
	};
	// 暴露给父组件
	defineExpose({
		upLoadVisible,
		imgList
	});
</script>
<style scoped lang="scss">
	@function px($px) {
		@return calc($px / 1.5) * 1px;
	}

	::v-deep .el-dialog {
		border-radius: px(17) !important;
		padding: 50px 50px 20px 50px;
	}
	::v-deep .el-dialog__headerbtn .el-dialog__close {
		font-size: px(30);
	}
	.textarea {
		height: 220px !important;
	}
	.upLoad {
		margin-top: px(10);
		max-height: px(300);
		overflow: auto;
	}
	.upLoad::-webkit-scrollbar {
		width: px(7); /* 滚动条宽度 */
	}
	.upLoad::-webkit-scrollbar-track {
		background: #f7f7f9; /* 滚动条轨道背景色 */
	}
	.upLoad::-webkit-scrollbar-thumb {
		background: #c1c5cb; /* 滚动条滑块颜色 */
		border-radius: px(10);
	}
	.upLoad::-webkit-scrollbar-thumb:hover {
		background: #c1c5cb; /* 鼠标悬停时滚动条滑块颜色 */
	}
	.btnBox {
		justify-content: end;
		margin-top: px(15);
		.botBtn {
			font-size: px(21);
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: LEFT;
			color: #ffffff;
			padding: px(16) px(40);
			background: #02102e;
			border-radius: px(10);
		}
	}
	.topTit {
		font-size: px(26.6);
		font-family: Manrope, Manrope-700;
		font-weight: 700;
		text-align: LEFT;
		color: #000000;
		margin-bottom: px(30);
	}
	::v-deep .ant-input:focus {
		border-color: #000000 !important;
		box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
	}
	::v-deep .ant-input:hover {
		border-color: #000000 !important;
		box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
	}
	::v-deep .el-upload--picture-card {
		height: px(120) !important;
		width: px(120) !important;
	}
	::v-deep .el-upload-list--picture-card .el-upload-list__item {
		height: px(120) !important;
		width: px(120) !important;
	}
</style>
